.m-grids
  position relative
  overflow hidden
  &:before    // 定义顶部边框样式 (<1px)
    content ''
    position absolute
    top 0
    left 0
    right 0  // left right 为0 表示 width100%
    height 1px
    border-top 1px solid #D9D9D9 // 顶部边框颜色
    color #D9D9D9
    transform-origin 0 0
    transform scaleY(0.5)  // Y轴方向 搜索0.5
  &:after   // 定义 左边的 边框
    content ''
    position absolute
    left 0
    top 0
    bottom 0
    width 1px
    border-left 1px solid #D9D9D9
    color #D9D9D9
    transform-origin 0 0
    transform scaleX(0.5)
  .m-grid   // 单元格
    position relative
    float left
    padding 10px 10px
    row-ctrl(4)
    //width 33.3333333%
    //width 20%
    &:before  // 单元格 的 右边框
      content ''
      position absolute
      right 0
      top 0
      bottom 0
      width 1px
      border-right 1px solid #D9D9D9
      transform-origin 100% 0  // 以x轴的 右侧为 变形中心
      transform scaleX(0.5)
    &:after     // 单元格 的 底边框
      content ''
      position absolute
      bottom 0
      left 0
      right 0
      height 1px
      border-bottom 1px solid #D9D9D9
      transform-origin 0 100%
      transform scaleY(0.5)
    &:active
      background-color #ececec
    .grid_icon
      position: relative
      width 50%
      height 0
      padding-top: 50%;
      margin 0 auto
      background no-repeat
      background-position center center
      background-size contain
      img
        position: absolute
        display block
        left 0
        top 0
        width 100%
        height 100%
      & + .grid_label  // 使用 + 选择器 表示 在 .grid_icon 随后的 .grid_label 才有margin-top
        margin-top 5px
    .grid_label
      display block
      text-align center
      color #000000
      // font-size 0.28rem
      white-space nowrap
      text-overflow ellipsis
      overflow hidden
